<template>
  <div class="m-app-bar" :class="{'border': border}" :style="{ zIndex, backgroundColor: bgColor }">
    <slot name="left" class="bar-left"></slot>
    <slot name="title" class="bar-title"></slot>
    <slot name="right" class="bar-right"></slot>
  </div>
</template>
<script>
import { defineComponent, toRefs } from 'vue'
export default defineComponent({
  name: 'AppBar',
  props: {
    title: {
      type: String
    },
    border: {
      type: Boolean,
    },
    zIndex: {
      type: [Number, String],
      default: 8,
    },
    bgColor: {
      type: String,
      default: 'transparent'
    }
  },
  setup (props) {
    const { title, border, zIndex, bgColor } = toRefs(props)
    return {
      title,
      border,
      zIndex,
      bgColor,
    }
  }
})
</script>
<style lang="less" scoped>

.m-app-bar {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
  text-align: center;
  border-bottom: solid 1px transparent;
  &.border {
    border-bottom-color: #efefef;
  }
}
</style>
